// 类组件
// import React,{Component} from 'react';

// 函数组件
import React from 'react';
import styles from './uc-cell.module.css';
import {withRouter} from 'react-router-dom'
import propTypes from 'prop-types';

/*
*
*
* */
// 类组件
// class UcCell extends Component{

//   static defaultProps = {
//     to: null,
//     url:'',
//     label:''
//   };
//   static propTypes = {
//     title: propTypes.string.isRequired,
//     label: propTypes.string,
//     url: propTypes.string,
//     to: function(props, propName, componentName) {
//       //props=={} propsName==to   componentName==使用这个to属性的目标组件  UcCell
//       if (typeof props[propName] !== 'string' && typeof props.to !== 'object') {
//         return new Error(
//           'Invalid prop `' + propName + '` supplied to' +
//           ' `' + componentName + '`. Validation failed.'
//         );
//       }
//     },


//   };

//   go = () => {
//     let {url, to}=this.props;

//     if (url) window.open(url,'_blank')
//     if (to) this.props.history.push(to)
//   };

//   render(){

//     let {children, title, label} = this.props;

//     return (
//       <div className={styles['uc-cell']}>
//         {
//           children && <div className={styles.flr}>{children}</div>
//         }
//         <div onClick={this.go}>
//           <h2>{title}</h2>
//           <p>{label}</p>
//         </div>

//       </div>
//     )
//   }
// }
// export default withRouter(UcCell)


// 函数组件
const UcCell = props =>{
  // 类的实例方法用闭包来实现
  const go = () => {
    let {url, to}=props;

    if (url) window.open(url,'_blank')
    if (to) props.history.push(to)
  };

  let {children, title, label} = props;

  return (
    <div className={styles['uc-cell']}>
      {
        children && <div className={styles.flr}>{children}</div>
      }
      <div onClick={go}>
        <h2>{title}</h2>
        <p>{label}</p>
      </div>

    </div>
  )
}

UcCell.defaultProps = {
      to: null,
      url:'',
      label:''
};
UcCell.propTypes = {
      title: propTypes.string.isRequired,
      label: propTypes.string,
      url: propTypes.string,
      to: function(props, propName, componentName) {
        //props=={} propsName==to   componentName==使用这个to属性的目标组件  UcCell
        if (typeof props[propName] !== 'string' && typeof props.to !== 'object') {
          return new Error(
            'Invalid prop `' + propName + '` supplied to' +
            ' `' + componentName + '`. Validation failed.'
          );
        }
      },
};

export default withRouter(UcCell)